Vue.prototype.mergeJSON = function (target, source) {
    for (var obj in source) {
        target[obj] = source[obj];
    }
    return target;
}
Vue.prototype.tableRender = function (datas, item) {
    var result = datas[item];
    if (!result) {
        return item;
    }
    return result;
}
Vue.prototype.formatTs = function (val) {
    if (val.length == 14) {
        return val.substring(0, 4) + '-' +
            val.substring(4, 6) + '-' +
            val.substring(6, 8) + ' ' +
            val.substring(8, 10) + ':' +
            val.substring(10, 12) + ':' +
            val.substring(12, 14);
    } else if (val.length == 10) {
        return val.substring(0, 2) + '-' +
            val.substring(2, 4) + ' ' +
            val.substring(4, 6) + ':' +
            val.substring(6, 8) + ':' +
            val.substring(8, 10);
    } else if (val.length == 8) {
        return val.substring(0, 4) + '-' +
            val.substring(4, 6) + '-' +
            val.substring(6, 8)
    } else {
        return val;
    }
}

Vue.component('default-table', {
    props: ['columns', "checkbox", "more"],
    mounted() {
        Vue.prototype.selection = "";
        Vue.prototype.selections = "";
        api.get("/button/array", { menuKey: this.currentMenu }).then(res => {
            this.buttons = res.data;
        });
        this.loadList();
    },
    data() {
        return {
            loading: false,
            page: { cur: 1, size: 10, total: 0 },
            datas: [],
            buttons: [],
        }
    },
    methods: {
        handle(e, name) {
            Vue.prototype.subTitle = e.target.innerText;
            var superObj = this.$parent[name];
            var obj = this[name];
            if (superObj != undefined) {
                if (this.checkbox) Vue.prototype.selections = this.$refs.table.getSelection();
                superObj.apply();
            } else {
                obj.apply();
            }
        },
        loadList() {
            this.loading = true;
            api.get(this.currentMenu, this.mergeJSON(this.page, this.queryInfo)).then(res => {
                this.datas = res.data.data;
                this.page.total = res.data.total;
                this.loading = false;
            }).catch(err => {
                console.error(err);
                this.loading = false;
                this.$Message.error('请求' + this.currentMenu + "失败");
            });
        },
        paging(page) {
            this.page = page;
            this.loadList(this.page);
        },
        query() {
            this.page.cur = 1;
            Vue.prototype.btnType = 1;
            Vue.prototype.readonly = false;
            Vue.prototype.selections = this.$refs.table.getSelection();
            this.app.$emit('switchView', this.currentMenu + '/query.html');
        },
        add() {
            Vue.prototype.btnType = 2;
            Vue.prototype.readonly = false;
            if (Vue.prototype.configCopy == "1") {
                Vue.prototype.selections = this.$refs.table.getSelection();
            }
            this.app.$emit('switchView', this.currentMenu + '/form.html');
        },
        edit() {
            Vue.prototype.btnType = 3;
            Vue.prototype.readonly = false;
            Vue.prototype.selections = this.$refs.table.getSelection();
            if (this.checkbox && this.selections.length > 0) {
                this.$Message.warn('请勾选中数据');
                return;
            } else if (!this.selection) {
                this.$Message.warn('请点击选中行');
                return;
            }
            this.app.$emit('switchView', this.currentMenu + '/form.html');
        },
        detail() {
            Vue.prototype.btnType = 4;
            Vue.prototype.readonly = true;
            Vue.prototype.selections = this.$refs.table.getSelection();
            if (this.checkbox && this.selections.length > 0) {
                this.$Message.warn('请勾选中数据');
                return;
            } else if (!this.selection) {
                this.$Message.warn('请点击选中行');
                return;
            }
            this.app.$emit('switchView', this.currentMenu + '/form.html');
        },
        del() {
            Vue.prototype.btnType = 5;
            Vue.prototype.selections = this.$refs.table.getSelection();
            if (this.checkbox && this.selections.length == 0) {
                this.$Message.warn('请勾选中数据');
                return;
            }
            if (!this.checkbox && !this.selection) {
                this.$Message.warn('请点击选中行');
                return;
            }
            var id = "";
            if (this.checkbox) {
                this.selections.forEach(item => {
                    id += Object.values(item)[0] + ",";
                });
                if (id.lastIndexOf(",") != -1) {
                    id = id.substring(0, id.length - 1);
                }
            } else {
                id = Object.values(this.selection)[0]
            }
            this.$Confirm("确定删除？", "提示").then(() => {
                api.delete(this.currentMenu + "/" + id).then(res => {
                    this.loadList();
                }).catch((err) => {
                    this.$Message.error(err);
                });
            });
        },
        rowSelect(data) {
            Vue.prototype.selection = data;
        },
        open(data) {
            this.$set(data, '_expand', !data._expand);
        },

    },
    template: `
    <div>
        <div class="h-panel-bar">
            <h-button-group>
                <h-button v-for="item in buttons" @click="handle($event,item.click)">{{item.title}}
                </h-button>
            </h-button-group>
        </div>
        <div class="h-panel-body bottom-line">
            <h-table :checkbox="checkbox" :selectRow="!checkbox" border="true"  ref="table" :datas="datas" @rowSelect="rowSelect" :loading="loading">
                <TableItem v-for="row in columns" :title="row.title" :prop="row.prop" :render="row.render"></TableItem>
                <TableItem title="更多" width="80" v-if="more && more.length>1">
                    <template slot-scope="{data}">
                        <span class="text-hover" @click="open(data)">{{data._expand?'收起':'展开'}}</span>
                    </template>
                </TableItem>
                <template slot="expand" slot-scope="{index, data}" v-if="more && more.length>1">
                    <h-form readonly mode="threecolumn" :label-width="150">
                        <FormItem  v-for="r in more" :label="r.title">{{data[r.prop]}}</FormItem>
                    </h-form>
                </template>
            </h-table>
        </div>
        <div class="h-panel-bar">
            <h-pagination :cur="page.cur" :small="true" :total="page.total" align="right" @change="paging"></h-pagination>
        </div>
    </div>`
});

Vue.component('s-select', {
    props: ['url', 'of', 'label', 'prop', 'value', 'multiple', 'mustMatch', 'readonly', 'required', 'single'],
    mounted() {
        if (this.readonly) {
            this.readonly = false;
        }
        if (this.mustMatch) {
            this.mustMatch = false;
        }
        if (this.value && this.initFlag) {
            this.initFlag = false;
            this.loadData(this.value, null);
        }
    },
    watch: {
        of(val) {
            if (!val) {
                this.show = '';
                this.value = '';
            }
        },
        value(val) {
            console.log(val);
            if (this.initFlag && val) {
                this.initFlag = false;
                this.loadData(val, null);
            }
        }
    },
    data() {
        return {
            initFlag: true,
            show: '',
            pagination: { cur: 1, size: 10, total: 10 },
            param: {
                keyName: 'keyName',
                titleName: 'titleName',
                minWord: 0,
                loadData: this.loadData
            },
            keyword: '',
        }
    },
    methods: {
        loadData(filter, callback) {
            if (this.of != undefined && (this.of == '' || this.of == null)) {
                if (callback)
                    callback([]);
                return false;
            }
            if (!callback && (!filter || filter.length == 0)) {
                return false;
            }
            if (this.keyword !== filter) {
                this.keyword = filter;
                this.pagination.cur = 1;
            }
            api.get(this.url, this.mergeJSON(this.pagination, { value: filter, p1: this.of })).then(res => {
                var data = res.data.data;
                if (data.length == this.pagination.size) {
                    this.pagination.total = this.pagination.size * (this.pagination.cur + 1);
                } else if (data.length == 0) {
                    this.pagination.total = this.pagination.size * this.pagination.cur
                } else {
                    this.pagination.total = this.pagination.size * (this.pagination.cur - 1) + data.length;
                }
                if (callback) {
                    callback(data);
                } else {
                    if (data.length != 0) {
                        this.show = data[0].titleName;
                        this.value = data[0].titleName;
                    }
                }
            });
        },
        pageChange(page) {
            this.pagination.cur = page.cur;
            this.$refs.sselect.search();
        },
        onChange(data) {
            this.$emit('input', data);
        },
    },
    template: `
    <h-formitem :label="label" :prop="prop" :required="required" :single="single">
        <div class="h-input h-input-suffix-icon">
            <h-autocomplete :option="param" placeholder="输入搜索条件" ref="sselect" v-model="value" :show="show" :multiple="multiple" :mustMatch="mustMatch" 
                @input="onChange" :disabled="readonly">
                <div slot="bottom" @mousedown.stop.prevent>
                    <h-pagination :cur="pagination.cur" :total="pagination.total" @change="pageChange" layout="pager" small></h-pagination>
                </div>
            </h-autocomplete>
            <i class="h-icon-angle-down" v-show="!value"></i>
        </div>
    </h-formitem>`
});




Vue.component('f-input', {
    props: ['label', 'prop', 'read', 'value', 'required', 'single'],
    mounted() {
        if (!this.read) {
            this.read = this.readonly;
        }
    },
    data() {
        return {}
    },
    methods: {
        updateVal(val) {
            this.$emit('input', val);
        }
    },
    template: `
    <h-formitem :label="label" :prop="prop" :required="required" :single="single">
        <input type="text" :readonly="read" :value="value" @input="updateVal($event.target.value)" />
    </h-formitem>`
});


Vue.component('f-select', {
    props: ['label', 'prop', 'read', 'url', 'params', 'value', 'required', 'isnull', 'single'],
    mounted() {
        if (!this.read) {
            this.read = this.readonly;
        }
        if (!this.isnull) {
            this.isnull = false;
        }
        api.get(this.url, this.params).then(res => {
            this.data = res.data;
        });
    },
    data() {
        return {
            data: []
        }
    },
    methods: {
        onInput(data) {
            this.$emit('input', data);
        },
    },
    template: `
    <h-formitem :label="label" :prop="prop" :required="required" :single="single">
        <h-select :datas="data" :readonly="read" :null-option="isnull" :value="value" @input="onInput"></h-select>
    </h-formitem>`
});


Vue.component('f-datepicker', {
    props: ['label', 'prop', 'read', 'required', 'single', 'value'],
    mounted() {
        if (!this.read) {
            this.read = this.readonly;
        }
    },
    methods: {
        onInput(data) {
            // if (!!data) {
            //     data = data.substring(0, 4) + data.substring(5, 7) + data.substring(8, 10);
            // }
            this.$emit('input', data);
        },
    },
    template: `
    <h-formitem :label="label" :prop="prop" :required="required" :single="single">
        <h-datepicker @input="onInput" :value="value"></h-datepicker>
    </h-formitem>`
});